<template>
  <div>
    <!-- 背景图 -->
    <div class="home">
      <img src="@/assets/img/bg@2x.png" alt="" style="margin-bottom:52px;" />
      <img src="@/assets/img/pic@2x.png" alt="" />
      <div class="homeTop">
        <img src="@/assets/img/logo@2x.png" alt="" class="homeLogo" />
        <div class="homeStart">{{ $t('Start_charging') }}</div>
        <div class="homeStart homeStart2">{{ $t('AnywhereAnytime') }}</div>
      </div>
    </div>

    <div class="bottom_div" v-if="showDown">
      <div class="bottom_btn1" @click="openApp">
        {{ $t('open_App') }}
      </div>
      <div class="bottom_btn1 bottom_btn2" @click="downloadApp">
        {{ $t('download_App') }}
      </div>
    </div>

    <!-- loading -->
    <van-overlay
      :show="showMask"
      z-index="99999"
      :custom-style="{ background: 'rgba(255,255,255,0)' }"
    >
      <div class="wrapper">
        <van-loading type="spinner" color="var(--text-color)" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data () {
    return {
      appScheme: 'joltzly://app/splash?', // app-scheme
      showMask: false, // 显示loading遮罩层
      showDown: false
    }
  },
  created () {
    this.getLang()
  },
  mounted () {
    if (this.isWeiXin()) {
      this.global.toast(this.$t('weiXin'))
      return
    }
    this.showMask = true
    let urL = window.location.href
    let urls = urL.split('?')[1]

    if (urls) {
      this.appScheme = this.appScheme + urls
      this.showMask = false
      this.showDown = true
    }
  },

  methods: {
    // 获取系统语言
    getLang () {
      let langArr = this.global.terminal.language.split('-')
      let lang = langArr[0].toLocaleUpperCase()
      const langAll = ['EN', 'ZH', 'ES']
      if (!langAll.includes(lang)) {
        lang = 'EN'
      }
      this.$store.commit('SET_LANG', lang)
      this.$i18n.locale = lang
    },

    // 判断是否微信打开
    isWeiXin () {
      var ua = window.navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true
      } else {
        return false
      }
    },

    // 下载 / 打开app
    downloadApp () {
      let appType = this.global.terminal.platform
      const iosDownloadUrl = 'itms-apps://itunes.apple.com/app/id1535224308' //ios-下载链接
      const androidDownloadUrl =
        'https://play.google.com/store/apps/details?id=com.standard.usa' //安卓-下载链接

      if (appType.android) {
        window.location.href = androidDownloadUrl
      } else if (appType.ios) {
        window.location.href = iosDownloadUrl
      }
    },

    openApp () {
      // 尝试打开 scheme
      window.location.href = this.appScheme
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  .backgroundImg {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    // position: fixed;
    object-fit: cover;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .textTip {
    width: calc(100% - 88px);
    background: #ffffff;
    border-radius: 16px;
    padding: 30px 20px;
    color: #fd5849;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    vertical-align: middle;
    .tipImg {
      vertical-align: middle;
      width: 16px;
      height: 16px;
      line-height: 22px;
      margin-right: 12px;
      margin-top: -2px;
    }
  }
}
</style>
